<template>
    <div class="wrap">
        <div class="container">
            <div class="position_block">
                <div class="my_car_text">售后服务 </div>
            </div>
            <div class="car_center_content">
                <el-steps :active="active" finish-status="success" align-center class="myStep">
                    <el-step title="买家申请售后" class="steps step-one" >
                        <i class="step-item" slot="icon">01</i>
                    </el-step>
                    <el-step title="卖家处理申请" class="steps step-two">
                        <i class="step-item " slot="icon">02</i>
                    </el-step>
                    <el-step title="售后完成" class="steps step-three">
                        <i class="step-item " slot="icon">03</i>
                    </el-step>
                </el-steps>
                <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
                <div class="myStep-content" v-show="active==0">
                    <div class="myStep-order-box">
                        <div class="item">
                            <span>退款商品：</span>
                            <div  class="refund_goods">
                                <div class="refund_goods_list">
                                    <div class="order_goods_info">
                                        <div class="order_goods_img">
                                            <img src="@/assets/images/img.png">
                                        </div>
                                        <div class="goods_spec_info">
                                            <div class="goods_name">同种异体肌腱</div>
                                            <div>型号：150680431530</div>
                                            <div>规格：200x20x5mm</div>
                                            <div>备注：多种产品规格满足临床不同需求</div>
                                        </div>
                                    </div>
                                    <div class="order_goods_num">
                                        x10
                                    </div>
                                </div>
                                <div class="refund_goods_list">
                                    <div class="order_goods_info">
                                        <div class="order_goods_img">
                                            <img src="@/assets/images/img.png">
                                        </div>
                                        <div class="goods_spec_info">
                                            <div class="goods_name">同种异体肌腱</div>
                                            <div>型号：150680431530</div>
                                            <div>规格：200x20x5mm</div>
                                            <div>备注：多种产品规格满足临床不同需求</div>
                                        </div>
                                    </div>
                                    <div class="order_goods_num">
                                        x10
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <span>服务类型：</span>
                            <span>仅退款</span>
                        </div>
                        <el-form ref="form" :model="form" label-width="165px" label-position="left">
                            <el-form-item label="货物批号：">
                                <el-input v-model="form.name" placeholder="请输入货物批号"></el-input>
                            </el-form-item>
                            <el-form-item label="序列号：">
                                <el-input v-model="form.name" placeholder="请输入序列号"></el-input>
                            </el-form-item>
                            <el-form-item label="货物状态：" required >
                                <el-select v-model="form.region" placeholder="未收到货" class="input-ww">
                                    <el-option label="未收到货" value="1"></el-option>
                                    <el-option label="未收到货" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="退款原因：" required>
                                <el-select v-model="form.region" placeholder="请选择退款原因" class="input-ww">
                                    <el-option label="未收到货" value="1"></el-option>
                                    <el-option label="未收到货" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="退款金额：" required>
                                <el-input v-model="form.name" placeholder="￥5700.00" class="input-ww"></el-input>
                                <span class="text-gray">最多 ￥5700.00，含发货邮费 ￥0.00</span>
                            </el-form-item>
                            <el-form-item label="退款说明：" required="">
                                <el-input 
                                    show-word-limit
                                    type="textarea" 
                                    v-model="form.desc"
                                    placeholder="请填写具体情况"
                                    maxlength="200"
                                    :rows="8"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item label="上传图片：">
                                <el-upload
                                    action=""
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <span class="text-gray">上传图片 (最多5张)</span>
                                <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </el-form-item>
                            <el-form-item class="margin-top30">
                                <el-button class="btn-main" @click="onSubmit">提交</el-button>
                            </el-form-item>
                        
                        </el-form>
                    </div>
                </div>

                <div class="myStep-content" v-show="active==1">
                    <div class="myStep-order-box">
                        <div class="item">
                            <span>退款商品：</span>
                            <div  class="refund_goods">
                                <div class="refund_goods_list">
                                    <div class="order_goods_info">
                                        <div class="order_goods_img">
                                            <img src="@/assets/images/img.png">
                                        </div>
                                        <div class="goods_spec_info">
                                            <div class="goods_name">同种异体肌腱</div>
                                            <div>型号：150680431530</div>
                                            <div>规格：200x20x5mm</div>
                                            <div>备注：多种产品规格满足临床不同需求</div>
                                        </div>
                                    </div>
                                    <div class="order_goods_num">
                                        x10
                                    </div>
                                </div>
                                <div class="refund_goods_list">
                                    <div class="order_goods_info">
                                        <div class="order_goods_img">
                                            <img src="@/assets/images/img.png">
                                        </div>
                                        <div class="goods_spec_info">
                                            <div class="goods_name">同种异体肌腱</div>
                                            <div>型号：150680431530</div>
                                            <div>规格：200x20x5mm</div>
                                            <div>备注：多种产品规格满足临床不同需求</div>
                                        </div>
                                    </div>
                                    <div class="order_goods_num">
                                        x10
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <span>服务类型：</span>
                            <span>仅退款</span>
                        </div>
                        <div class="item">
                            <span>货物批号：</span>
                            <span>200507AD</span>
                        </div>
                        <div class="item">
                            <span>序列号：</span>
                            <span>2054 8903 0794 0340</span>
                        </div>
                        <div class="item">
                            <span>货物状态：</span>
                            <span>未收到货</span>
                        </div>
                        <div class="item">
                            <span>退款原因：</span>
                            <span>下错单，需要重新下单</span>
                        </div>
                        <div class="item">
                            <span>退款金额：</span>
                            <span>￥5700.00</span>
                        </div>
                        <div class="item">
                            <span>退款说明：</span>
                            <span>无</span>
                        </div>
                    </div>
                </div>
                
                <div class="myStep-content" v-show="active==2">
                    <div class="success">
                        <span class="el-icon-success"></span>
                        <div class="text-xl">售后完成</div>
                        <p>退款金额 <span class="text-blue">￥5700.00</span> 将在三个工作日内退回相应账户，请及时查看。</p>
                    </div>
                    <div class="myStep-order-box">
                        <div class="item">
                            <span>退款商品：</span>
                            <div  class="refund_goods">
                                <div class="refund_goods_list">
                                    <div class="order_goods_info">
                                        <div class="order_goods_img">
                                            <img src="@/assets/images/img.png">
                                        </div>
                                        <div class="goods_spec_info">
                                            <div class="goods_name">同种异体肌腱</div>
                                            <div>型号：150680431530</div>
                                            <div>规格：200x20x5mm</div>
                                            <div>备注：多种产品规格满足临床不同需求</div>
                                        </div>
                                    </div>
                                    <div class="order_goods_num">
                                        x10
                                    </div>
                                </div>
                                <div class="refund_goods_list">
                                    <div class="order_goods_info">
                                        <div class="order_goods_img">
                                            <img src="@/assets/images/img.png">
                                        </div>
                                        <div class="goods_spec_info">
                                            <div class="goods_name">同种异体肌腱</div>
                                            <div>型号：150680431530</div>
                                            <div>规格：200x20x5mm</div>
                                            <div>备注：多种产品规格满足临床不同需求</div>
                                        </div>
                                    </div>
                                    <div class="order_goods_num">
                                        x10
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <span>服务类型：</span>
                            <span>仅退款</span>
                        </div>
                        <div class="item">
                            <span>货物批号：</span>
                            <span>200507AD</span>
                        </div>
                        <div class="item">
                            <span>序列号：</span>
                            <span>2054 8903 0794 0340</span>
                        </div>
                        <div class="item">
                            <span>货物状态：</span>
                            <span>未收到货</span>
                        </div>
                        <div class="item">
                            <span>退款原因：</span>
                            <span>下错单，需要重新下单</span>
                        </div>
                        <div class="item">
                            <span>退款金额：</span>
                            <span>￥5700.00</span>
                        </div>
                        <div class="item">
                            <span>退款说明：</span>
                            <span>无</span>
                        </div>
                    </div>
                </div>
                
            </div>
           
        </div>
    </div>
</template>

<script>


  export default {
    data() {
        return {
            active: 0,
            form: {},
             dialogImageUrl: '',
            dialogVisible: false
        };
    },
    methods: {
        next() {
            if (this.active++ > 2) this.active = 0;
        },
        onSubmit() {
            console.log('submit!');
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    },

  };
</script>
